<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/table.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css">

</head>
<body>
	<table border="1">
		<!---表头-->
		<thead>
			<tr class="header">
				<th colspan="5">采购清单</th>
			</tr>
			<tr>
				<th>序号</th>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
		</thead>
		<!--表体-->
		<tbody>
			<tr>
				<td>1</td>
				<td>笔记本</td>
				<td>2.5</td>
				<td>2</td>
				<td>
					<button class="delItem">删除</button>
					<button class="addItem">添加</button>
				</td>
			</tr>

			<tr>
				<td>2</td>
				<td>笔记本</td>
				<td>2.5</td>
				<td>2</td>
				<td>
					<button class="delItem">删除</button>
					<button class="addItem">添加</button>
				</td>
			</tr>

			<tr>
				<td>3</td>
				<td>笔记本</td>
				<td>2.5</td>
				<td>2</td>
				<td>
					<button class="delItem">删除</button>
					<button class="addItem">添加</button>
				</td>
			</tr>

			<tr>
				<td>4</td>
				<td>笔记本</td>
				<td>2.5</td>
				<td>2</td>
				<td>
					<button class="delItem">删除</button>
					<button class="addItem">添加</button>
				</td>
			</tr>

			<tr>
				<td>5</td>
				<td>笔记本</td>
				<td>2.5</td>
				<td>2</td>
				<td>
					<button class="delItem">删除</button>
					<button class="addItem">添加</button>
				</td>
			</tr>

			<tr>
				<td>6</td>
				<td>笔记本</td>
				<td>2.5</td>
				<td>2</td>
				<td>
					<button class="delItem">删除</button>
					<button class="addItem">添加</button>
				</td>
			</tr>

			<tr>
				<td>7</td>
				<td>笔记本</td>
				<td>2.5</td>
				<td>2</td>
				<td>
					<button class="delItem">删除</button>
					<button class="addItem">添加</button>
				</td>
			</tr>
			<tr>
				<td colspan="5">
					<p style="text-align: center;" >总计<a id="sum" style='color:red;'></a></p>
				</td>
			</tr>
		</tbody>

	</table>

<div class="shade" style="display: none;">
	<div class="form-wrap">
		<h5 class="form-header">添加商品</h5>
		<div class="addform">
			<input name="goods" type="text" value="" placeholder="请输入商品名称"><br>
			<input name="price"  type="text" value="" placeholder="请输入商品单价"><br>
			<input name="num"  type="text" value="" placeholder="请输入商品数量"><br>
			<div class="addoption">
				<button id="addBtn">确定</button>
				<button id="missBtn">取消</button>
			</div>
		</div>
		<div class="cha">
			<span class="iconfont icon-guanbi" style="color: #fff"></span>
		</div>
	</div>
</div>


<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript">

	/*定义一个统计函数*/
	var calSum =function(){
		var sum=0;
		// for(i=0;i<$('tbody tr').length-1;i++){
		// 	var price=$('tbody tr:eq('+i+')').find('td:eq(2)').text();
		// 	var num=$('tbody tr:eq('+i+')').find('td:eq(3)').text();
		// 	var total=price*num;
		// 	sum +=total;
		// }

		/*给查找出来的每个行都应用相同的方法*/
		$('tbody tr').each(function(){
			var price=$(this).find('td:eq(2)').text();
			var num=$(this).find('td:eq(3)').text();
			var total=price*num;

			sum+=total;
		});
		
		/*显示计算的金额*/
		$('#sum').text(sum);
	};
	calSum();

		$('tbody tr:odd').addClass('odd');

		$('.addItem').click(function(){
		$('.shade').show();
	})

		$('.delItem').click(function(){
			/*删除行*/
			$(this).parent().parent().remove();
			/*调整一下奇偶行的样式*/
			$('tbody tr').removeClass();
			$('tbody tr:odd').addClass('odd');
			/*调整每行的序号*/
			for(var i=0;i<$('tbody tr').length-1;i++){
				 	$('tbody tr:eq(' +i+')').find('td:first').text(i+1);
				 }
				 calSum();

		})


	  	$('#missBtn').click(function(){
		$('.shade').hide();
	})

	  	var showForm=function(){
	  		$('.shade').show();
	  		calSum();

	  	}
	  	var delTr= function(btn){
	  		console.log(btn);
	  		$(btn).parent().parent().remove();
	  		calSum();

	  	}

		$('#addBtn').click(function(){
		var goodsname=$('input[name=goods]').val();
		var price=$('input[name=price]').val();
		var num=$('input[name=num]').val();

		/*清空输入框*/
		$('input[name=goods]').val('');
		$('input[name=price]').val('');
		$('input[name=num]').val('');


		var  ntr=$('tbody tr').length;
		var sn=$('tbody tr:eq('+(ntr-2)+')').find('td:first').text();
		
		

		/*把表单的值追加到表格的指定位置*/
		var tr='<tr><td>'+(sn*1+1)+'</td><td>'+goodsname+'</td><td>'+price+'</td><td>'+num+'</td><td><button class="delItem" onclick="delTr(this)">删除</button>\
		<button onclick="showForm()">添加</button></td></tr>';
			/*往表格中插入一行*/
		$('tbody tr:eq('+(ntr-2)+')').after(tr);
		

		/*隐藏表单的输入层*/
		$('.shade').hide();
		calSum();
		
		

		console.log(goodsname+'--'+price+'--'+num);
	});

	$('.cha').click(function(){
		$('.shade').hide();
	})
</script> 
	
</body>
</html>